<script setup lang="ts">
import navbar from '@/components/navbar.vue';
import { onUnmounted } from 'vue';
import { ElMessage } from 'element-plus';
import { useWebSocketStore } from '@/stores/websocket';
import { eventBus } from '@/WebSocket/eventBus';
import { WebSocketMessageType } from './interface/type';
import router from './router';

const websocketStore = useWebSocketStore();
websocketStore.connect();

eventBus.on('message-received', (message) => {
  // 确保 message.data 是 SystemMessage 类型
  const systemMessage = message.data;

  if (message.type === WebSocketMessageType.NOTICE) {
    ElMessage({
      message: systemMessage.messageContent, // 显示消息内容
      type: systemMessage.messageType, // 使用 'info' 类型展示
      duration: 3000,
      showClose: true,
    });
  }

  if (message.type === WebSocketMessageType.PRODUCT) {
    ElMessage({
      message: systemMessage.messageContent, // 显示消息内容
      type: systemMessage.messageType, // 成功类型展示
      duration: 3000,
      showClose: true,
    });
    console.log('Message received from WebSocket:', WebSocketMessageType.PRODUCT + systemMessage);
    
    // 跳转到主页
    router.push('/');
  }
 

  console.log('Message received from WebSocket:', systemMessage);
});

// 组件卸载时执行清理操作
onUnmounted(() => {
  eventBus.off('message-received'); // 取消消息接收事件监听
});
</script>

<template>
  <navbar class="navbar"></navbar>
  <RouterView class="router-view" />
</template>

<style>
:root{
  --shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
  --el-menu-hover-bg-color: white;
}

body {
  background-color: var(--bPageBgColor);
  /* background-image: url("@/assets/icons/pagebg.png"); */
  background-position: left bottom;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 200px;
}
.el-menu-item.is-active {
  background: var(--selectRowBgColor) !important;
}

.el-submenu__title:hover{

  background-color:  var(--bPageBgColor) !important; 

}

.el-menu-item:hover {

  background-color: var(--bPageBgColor) !important;
 
 }

 .el-menu-item:hover{  
  outline: 0 !important;  
  color: #409EFF !important;  
}  
.el-menu-item.is-active {  
  color: #fff !important;  
  background: #409EFF !important;  
}  
.el-submenu__title:focus, .el-submenu__title:hover{  
  outline: 0 !important;  
  color: #409EFF !important;  
  background: #fff !important;  
}  


</style>
  <style scoped>
  *::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
  
  .el-backtop {
    box-shadow: none;
    border: 1px solid #e8e8e8;
  }
  
  /* 固定导航栏样式 */
  .navbar {
    position: fixed;   /* 固定定位 */
    top: 0;            /* 距离页面顶部0 */
    left: 0;           /* 距离页面左侧0 */
    width: 100%;       /* 占据整个页面宽度 */
    z-index: 1000;     /* 保证导航栏在最前面 */
    box-shadow: var(--shadow); /* 添加阴影效果 */
  }
  
  /* 为内容留出导航栏高度的空间，避免内容被遮挡 */
  body {
    margin-top: 70px; /* 根据导航栏的高度进行调整，假设导航栏高度为60px */
  }
  .router-view{
    margin-top: 70px;
  }
  @media (min-width: 600px) {
    /* 针对大屏幕的媒体查询 */
  }
  
  @keyframes floatingbox_show {
    0% {
      transform: scale(1, 1);
    }
    50% {
      transform: scale(0.99, 0.99);
    }
    100% {
      transform: scale(1, 1);
    }
  }

</style>
